<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS transform 属性 - 可以对指定元素进行旋转、缩放、倾斜或平移等操作</title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color:blueviolet;
            background-image: url(./img/bg.png);
            background-size: cover;
            transform: translateX(0px);
            /* CSS 注释 */
            /*transform: translateY(20px);*/
            /* 设置 z轴 30px，现在在页面看不到变化，因为是屏幕正对着眼睛在变化，实际上已经变化了，只是感受不到而已 */
            /*transform: translateZ(30px);*/
            /* 先对图片进行旋转 rotate 之后（50deg 50度），就能看到效果 */
            /*transform: rotateY(50deg) translateZ(40px);*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
